import { Component } from 'react';
import './Zzmx.less';
import Tabs  from 'uxcore-tabs';
import Table from 'uxcore-table';
import EmptyData from 'uxcore-empty-data';
import Matrix from 'uxcore-matrix';
import { URLS } from './../../app/variables';

export default class Zzmx extends Component {

  constructor(props) {
    super(props);
    this.customRender = this.customRender.bind(this);
  }

  customRender(cellData) {
    const style = {
      lineHeight: '50px',
      textAlign: 'left',
      padding: '0 20px',
      overflow: 'hidden',
    };
    if (cellData.type === 'title') {
      if (cellData.row === 2) {
        style.lineHeight = '100px';
      }
      style.textAlign = 'right';
      style.color = 'rgba(0, 0, 0, 0.8)';
      style.fontWeight = 'bold';
      style.background = 'rgba(31,56,88,0.04)';
    }

    let content = cellData.text;
    if (cellData.type === 'link') {
      content = <a>{content}</a>;
    }
    return (
      <div style={style}>
        {content}
      </div>
    );
  }

  render() {


    const data = {
      data: [
        {x: 0, y: 0, row: 1, col: 1, type: 'title', text: '证书名称'},
        {x: 1, y: 0, row: 1, col: 1, type: 'normal', text: this.props.data.zsmc},
        {x: 2, y: 0, row: 1, col: 1, type: 'title', text: '证书编号'},
        {x: 3, y: 0, row: 1, col: 1, type: 'normal', text: this.props.data.zsbh},

        {x: 0, y: 1, row: 1, col: 1, type: 'title', text: '发证日期'},
        {x: 1, y: 1, row: 1, col: 1, type: 'normal', text: this.props.data.fzrq},
        {x: 2, y: 1, row: 1, col: 1, type: 'title', text: '有效期'},
        {x: 3, y: 1, row: 1, col: 1, type: 'normal', text: this.props.data.yxq}

      ]
    }

    return (
      <div className="mod-zzmx">
        <Tabs defaultActiveKey="1" type="small">
          <Tabs.TabPane tab="基本信息" key="1">
            <div className="col_1 zzmx-table-div" style={{height:525}}>
              <Matrix
                data={data}
                cellWidth={[160,315,160,315]}
                render={this.customRender}
              />
            </div>
          </Tabs.TabPane>
        </Tabs>
      </div>
    );
  }
}
